
<template>
  <section v-if='tableVisible' class="laborCost-table" :class='{emptyClass:empty}'>

    <div class="export">
      <span>
        <el-button type='success' @click.stop = 'downLoadExcel'>
          导出Excel
        </el-button>
      </span>
      <span>
        <el-button @click.stop='dialogVisible = true'>自定义表格内容<i class="el-icon-edit el-icon--right"></i></el-button>
      </span>
    </div>

    <el-table
      :data="tableData"
      max-height="500"
      border
      stripe>

      <el-table-column
        v-for='(k,i) in tableCol.filter(ele=>ele.status)'
        :prop="k.value"
        :label="k.label"
        align="center"
        :formatter="formatter"
        :min-width ='setWidth(k.label)'
        >
      </el-table-column>
    </el-table>

    <div class="fenye">
      <el-pagination
          
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageNum"
        :page-size="page.pageSize"
        :page-sizes="[10, 40, 100, 200,400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        >

        </el-pagination>
    </div>

    <custom-dialog :type='this.type' :colList.sync='tableCol' :dialogVisible.sync='dialogVisible'/>

  </section>
</template>

<script>
import Vue from 'vue'
import { Pagination, Message } from 'element-ui'
import Bus from './bus'
import CustomDialog from './customDialog'
Vue.use(Pagination)
export default {

  components: {
    CustomDialog
  },

  props: {
    type: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
      dialogVisible: false,
      tableVisible: false,
      tableData: [],
      tableCol: [],
      page: {},
      params: {}
    }
  },
  computed: {
    empty () {
      return this.tableCol.length
    }
  },
  mounted () {
    Bus.$on('tableDatas', (data) => this.tableData = data)
    Bus.$on('tableVisible', (data) => this.tableVisible = data)
    Bus.$on('page', (data) => this.page = data)
    Bus.$on('params', (data) => this.params = data)

    this.getTablCol()
  },
  methods: {
    formatter (row, column, cellValue) {
      if (cellValue) {
        if (cellValue.length > 15 && Array.from(cellValue).includes('-') && Array.from(cellValue).includes(':')) {
          return cellValue.substr(0, 10)
        }
      }

      return cellValue
    },
    setWidth (label) {

      switch (label) {

        case '部门':
          return 260
          break

        case '二级组织':
          return 260
          break

        case '三级组织':
          return 260
          break

        case '四级组织':
          return 260
          break


        case 'ID号':
          return 120
          break

        case '专业':
          return 100
          break

        case '职务':
          return 120
          break

         case '出生地':
          return 400
          break


        case '入司时间':
          return 200
          break


        case '身份证号':
          return 300
          break


        case '最高学历':
          return 120
          break

        case '毕业时间':
          return 120
          break
        case '手机号码':
          return 130
          break
        case '家庭住址':
          return 260
          break
        case '转正日期':
          return 300
          break


        default:
          break
      }
      const len = label.length
      switch (len) {
        case 1:
          return 80
          break

        case 2:
          return 80
          break

        case 3:
          return 80
          break


        default:
          return len * 24
          break
      }
    },

    getTablCol () {
      const params = {
        type: this.type
      }
      this.Axios
        .Post('/reportShowColumns/getUserShowColumn', params)
        .then((res) => {
          this.tableCol = res.data.datas.showColumns
        })
    },

    handleSizeChange (val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.page.pageNum = val
      this.getTableData()
    },

    getTableData () {

      const params = { ...this.params,pageNum: this.page.pageNum,pageSize: this.page.pageSize}

      this.Axios.Post('/employeeInformation/queryEmpInformationList', params)
        .then((res) => {

          const { datas } = res.data
          this.tableData = datas
          this.page = res.data.page

        })
    },


    downLoadExcel () {


      let params = ``, sum = 0

      for (const key in this.params) {
        params += sum === 0 ? `?${key}=${encodeURI(this.params[key])}` : `&${key}=${encodeURI(this.params[key])}`
        sum++
      }

      !params.includes('token') && (params += `?token=${localStorage.getItem('token')}`)

      window.location.href = this.Axios.baseURI + '/employeeInformation/employeeInformationExport' + params
    }
  },


}
</script>
<style scoped lang='less'>
.laborCost-table {
  padding: 0 20px 50px 20px;
  border-top: 20px solid #f1f1f1;
}
.export {
  margin: 20px 0 15px 0;
  overflow: hidden;
  > span:first-of-type {
    float: left;
  }

  > span:last-of-type {
    float: right;
  }
}

.fenye {
  margin: 20px 0 0 -15px;
}
</style>

<style>

.laborCost-table .fenye .el-pagination span {
  line-height: 24px !important;
}

.laborCost-table .fenye .el-pagination__total {
  padding-top: 3px;
}

.laborCost-table .label-class {
  line-height: 65px;
}
</style>